<template>
  <div class="course mx-center">
    <!-- 搜索模块 -->
    <div class="course-search">
      <div class="search-tag">
        <img src="https://www.imooc.com/static/img/course/logo-course2.png" width="96" height="60" alt="">
        <img src="https://www.imooc.com/static/img/course/course-top.png" width="96" height="60" alt="">
      </div>
      <div class="search-wrapper">
        <input v-model="query.title" @keyup.enter="getCourseListData(query, listQuery)" type="text" placeholder="搜索感兴趣的内容">
        <i @click="getCourseListData(query, listQuery)" class="iconfont">&#xe63c;</i>
      </div>
    </div>

    <!-- 导航模块 -->
    <div class="course-nav">
      <dl>
        <dt>{{ navList[0].type }}：</dt>
        <dd
                v-for="(nav,index) in navList[0].data"
                :key="index"
                :class="{active: nav == currentTag}"
                @click="handleTagNavClick(nav,index)"
        >
          {{ nav }}
        </dd>
      </dl>
    </div>
    <div class="course-nav">
      <dl>
        <dt>{{ navList[1].type }}：</dt>
        <dd
                v-for="(nav,index) in navList[1].data"
                :key="index"
                :class="{active: nav == currentRank}"
                @click="handleRankNavClick(nav,index)"
        >
          {{ nav }}
        </dd>
      </dl>
    </div>

    <!-- 课程列表 -->
    <course-list v-if="courseList.length" :list.sync="courseList" />

    <!-- 分页 -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getCourseListData(query, listQuery)" />
  </div>
</template>
<script>
import CourseList from './course-list.vue'
import Pagination from 'components/pagination/pagination.vue'
import { getCourseList } from 'api/course.js'
import { ERR_OK } from 'api/config.js'
export default {
  data () {
    return {
      navList: [],
      courseList: [], // 课程信息
      listQuery: {
        page: 1,
        limit: 18
      },
      total: 0,
      query: {
        tag: null,
        rank: null,
      },
      currentTag: '全部',
      currentRank: '全部',
    }
  },
  created () {
    this.getCourseNavList()
    this.getCourseListData(this.query, this.listQuery)
  },
  components: {
    CourseList,
    Pagination
  },
  methods: {
    // 获取课程导航信息
    getCourseNavList () {
      this.navList = [
        {
          "type": "分类",
          "code": "category",
          "data": ["全部","HTML/CSS", "JavaScript", "Vue", "React", "Angular", "Node",
            "小程序", "前端工具", "CSS", "Html5", "CSS3","Java", "SpringBoot","Spring Cloud",
            "Python", "爬虫", "Django", "Tornado", "Go", "PHP", "C", "C++", "C#", "Ruby","Android", "iOS", "React native",
            "MySQL", "Redis", "MongoDB", "Oracle", "SQL Server", "NoSql","大数据","Hadoop", "Spark", "Hbase", "Storm",
            "运维", "自动化运维", "运维工具", "中间件", "Linux",]
        },
        {
          "type": "难度",
          "code": "difficult",
          "data": ["全部", "初级", "中级", "实战"]
        }
      ]
    },
    // 获取课程信息接口
    getCourseListData (query, listQuery) {
      getCourseList(query, listQuery).then(res => {
        if(res.code === ERR_OK) {
          this.courseList = res.data.rows
          this.total = res.data.total
        }
      })
    },
    // 导航点击事件
    handleTagNavClick (nav, index) {
      this.currentTag = nav
      if (nav == '全部') {
        this.query.tags = null
      } else {
        this.query.tags = nav
      }
      this.getCourseListData(this.query, this.listQuery)
    },
    handleRankNavClick (nav, index) {
      this.currentRank = nav
      if (nav == '全部') {
        this.query.rank = null
      } else {
        this.query.rank = nav
      }
      this.getCourseListData(this.query, this.listQuery)
    },
  }
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .course
    padding-top: 20px;
    .course-search
      padding: 12px 0;
      border-bottom: 1px solid $border-second-color;
      .search-tag
        display: inline-block;
        & > img:nth-child(2)
          margin-left: 16px;

  .course-nav
    dl
      position: relative;
      padding: 16px 0 10px 52px;
      border-bottom: 1px solid $border-three-color;
      font-size: 14px;
      dt
        position: absolute;
        left: 0;
        top: 22px;
        color: $font-first-color;
        font-weight: 700;
      dd
        display: inline-block;
        padding: 0 10px;
        margin: 0 5px 10px 0;
        height: 30px;
        line-height: 30px;
        color: $font-first-color;
        cursor: pointer;
        &.active
          background-color: rgba(242,13,13,.06);
          border-radius: 6px;
          color: $theme-red-color;
          font-weight: 700;
        &:hover
          color: $theme-red-color;

  .search-wrapper
    position: relative;
    float: right;
    width: 466px;
    height: 60px;
    line-height: 60px;
    .iconfont
      position: absolute;
      right: 15px;
      top: 20px;
      font-size: 24px;
      color: $font-four-color;
      cursor: pointer;
      line-height: 1;
    input
      padding: 0 16px;
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      line-height: 36px;
      border-radius: 5px;
      outline: none;
      background: #f3f5f6;
      font-size: 14px;
      color: $font-first-color;
    .search-result
      z-index: 99;
      position: absolute;
      left: 0;
      top: 52px;
      right: 0;
      background-color: #fff;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      box-shadow: 0 4px 8px 0px $shadow;
      .result-item
        padding-left: 20px;
        line-height: 50px;
        color: $font-first-color;
        cursor: pointer;
        font-size: 14px;
        &:hover
          background: #f3f5f6;
</style>
